<%--
  Created by IntelliJ IDEA.
  User: xiaoyuyu
  Date: 2019/7/10
  Time: 15:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<html>
<head>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <link rel="stylesheet" href="./css/x-admin.css" media="all">
    <title>Title</title>
    <style>
        .table td /*设置表格文字左右和上下居中对齐*/
        {
            vertical-align: middle;
            text-align: center;
        }
        h3{
            text-align: center;
            font-size: 20px;
            margin: 5px;
        }
        .total_money{
            float: right;
            margin: 5px;
        }
        .cashier{
            float: left;
            margin: 8px;
        }
        .collect_date{
            float: right;
            margin: 8px;
        }
        .control{
            margin-left: 5px;
            padding: 2px;
        }
        .control tr td{
            padding: 2px 2px;
        }
        .total_money{
            float: right;
            font-size: 20px;
        }

    </style>
</head>

<body>
<%--${orderItemList}--%>
<h3>收银信息</h3>
<div class="total_money">
    合计：<span></span>元
</div>
<table class="control">
    <tr>
        <td>优惠总额：</td>
        <td>18</td>
        <td>应收：</td>
        <td>23.8</td>
    </tr>
    <tr>
        <td>实收金额：</td>
        <td>
            <label>
                <input type="number" id="amount_receivable"
                       name="amount_receivable" autocomplete="off"
                       class="layui-input" value="0" style="width: 60px;" />
            </label>
        </td>
        <td>找零：</td>
        <td id="change"></td>
    </tr>
    <tr>
        <td colspan="2"><button class="layui-btn" onclick="cancel()" style="background: #9F9F9F;"><i class="layui-icon"></i>取消</button></td>
        <td colspan="2"><button class="layui-btn" onclick="affirm()"><i class="layui-icon"></i>确定</button></td>
    </tr>
</table>
<hr/>
<div class="cashier">
    收银员:SY0003
</div>
<div class="collect_date">
    日期:2019/3/19 上午 9:13:59
</div>

<div class="table">
    <table border="1" style="margin: auto;width: 98%">
        <thead>
        <tr>
            <th>
                序号
            </th>
            <%--<th>
                商品条码
            </th>--%>
            <th>
                商品名称
            </th>
            <th>
                单价
            </th>
            <th>
                单位
            </th>
            <th>
                数量
            </th>
            <th>
                金额
            </th>
        </tr>
        </thead>
        <tbody>
        <c:set var="index" value="1" />
        <c:set var="total_money" value="0"/>
        <%--订单号--%>

        <c:forEach items="${orderItemList}" var="orderItem">
            <c:set var="order_id" value="${orderItem.order_id}" />
            <tr>
                <td>
                        ${index}
                </td>
                <%--<td>
                        ${orderItem.bar_code}
                </td>--%>
                <td>
                        ${orderItem.product_name}
                </td>
                <td>
                        ${orderItem.price}
                </td>
                <td>
                        ${orderItem.product_unit}
                </td>
                <td>
                        ${orderItem.amount}
                </td>
                <td>
                    <%--<c:set var="money" value="${orderItem.price * orderItem.amount}" />--%>
                        <%--${money}--%>
                        <%--出现0.0000000036这种类似的不准确的数字--%>
                    <fmt:formatNumber var="money" value="${orderItem.price * orderItem.amount}" pattern="#0.0#" />
                    ${money}
                </td>
            </tr>
            <c:set var="index" value="${index + 1}"/>
            <c:set var="total_money" value="${total_money + money}"/>
        </c:forEach>

        </tbody>
    </table>
    <br>
    <br>
    <br>



</div>

<script src="../../lib/layui/layui.js" charset="utf-8">
</script>
<script src="../../js/x-layui.js" charset="utf-8">
</script>
<script src="../../js/jquery.min.js" charset="utf-8"></script>
<script>
    //显示总计
    $(".total_money span").replaceWith("<span>"+ ${total_money} +"</span>");
    //找零跟据实收金额变化
    $("#amount_receivable").bind("input propertychange",function (event) {
        var total_money = ${total_money};
        var change = $("#amount_receivable").val() - total_money;
        $("#change").replaceWith("<td id=\"change\">"+ change +"</td>");


    });
    
    //取消
    function cancel() {
        layui.use(['layer'],function () {
            layer.closeAll();
            window.parent.location.reload();
        });

    }
    
    //确认
    function affirm() {

        layui.use(['layer'],function () {
            //检查实收数值是否合法
            var amount_receivable = $("#amount_receivable").val();
            if(amount_receivable < ${total_money}){
                layer.msg("实收金额不规范", {icon: 5,time:1000});
                return;
            }
            $.ajax({
                type:"POST",
                url:"${pageContext.request.contextPath}/confirmTheCheck",
                data:{"id":${order_id},"cashier":"SY0003"
                ,"amount_receivable":amount_receivable,"total_money":${total_money}},
                async:false,
                success:function (rdata) {
                    console.log(rdata);
                    if(rdata.state_code){
                        layer.closeAll();
                        window.parent.location.reload();
                    }else{
                        layer.alert("订单信息异常", {icon: 5});
                    }
                }

            });
        });
    }
</script>

</body>

</html>
